<template>
  <div class="app-container">
    <div class="app-container-main">
      <div class="main-card-header">广告位添加</div>
      <div class="main-card-body">
        <a-form
          :model="formState"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :rules="rules"
        >
          <a-form-item label="所属平台" name="region">
            <a-select
              style="width: 400px"
              v-model:value="formState.region"
              placeholder="请选择平台"
            >
              <a-select-option value="APP">APP</a-select-option>
              <a-select-option value="触屏版">触屏版</a-select-option>
              <a-select-option value="微信小程序">微信小程序</a-select-option>
              <a-select-option value="pc端">pc端</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="广告位名称" name="title">
            <a-input style="width: 400px" v-model:value="formState.title" />
          </a-form-item>
          <a-form-item label="调用名称" name="use_name">
            <a-input style="width: 400px" v-model:value="formState.use_name" />
            <span style="color: #999">
              <span style="margin: 0 10px"><exclamation-circle-filled /></span>
              自定义广告位调用名不可以以 “QS_”开头
            </span>
          </a-form-item>
          <a-form-item label="数量" name="num">
            <a-input style="width: 400px" v-model:value="formState.num" />
          </a-form-item>
          <a-form-item label="建议宽度" name="width">
            <a-input style="width: 400px" v-model:value="formState.width" />
          </a-form-item>
          <a-form-item label="建议高度" name="height">
            <a-input style="width: 400px" v-model:value="formState.height" />
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">保存</a-button>
            <a-button style="margin-left: 10px" @click="goback">返回</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, toRaw, ref, reactive } from "vue";
import { HomeOutlined, ExclamationCircleFilled } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { addADwei } from '@/api/ad';
import { useRouter } from "vue-router";
import type { UnwrapRef } from "vue";
interface FormState {
  name: string;
  delivery: boolean;
  type: string[];
  resource: string;
  desc: string;
}

export default defineComponent({
  components: {
    HomeOutlined,
    ExclamationCircleFilled,
  },
  computed: {},
  emits: [],
  props: {},
  setup() {
        // 获取到的路由参数
    const router = useRouter(); //获取到值
    const formState = reactive({
      region: undefined,
      title: "",
      use_name: "",
      num: "",
      width: "",
      height: "",
    });

    const rules = {
      region: [
        { required: true, message: "请选择所属平台！", trigger: "blur" },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
      title: [
        { required: true, message: "请输入广告位名称！", trigger: "blur" },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
      use_name: [
        { required: true, message: "请输入调用名称！", trigger: "blur" },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        {
          validator: (rule, use_name, callback) => {
            if (use_name.replace(/^\s*|\s*$/g, "").length >= 3) {
              if (use_name.replace(/^\s*|\s*$/g, "").slice(0, 3) == "QS_") {
                callback("自定义广告位调用名不可以以 “QS_”开头");
                return false;
              } else {
                callback();
              }
            }
          },
        },
      ],
      num: [
        { required: true, message: "请输入广告位数量！", trigger: "blur" },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
      width: [
        { required: true, message: "请输入广告位宽度！", trigger: "blur" },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
      height: [
        { required: true, message: "请输入广告位高度！", trigger: "blur" },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
    };

    const onSubmit = () => {
      console.log("submit!", toRaw(formState));
      addADwei(formState)
    };
    const goback = () => {
      router.push('/content/advertising_place')
    };


    onMounted(() => {});

    return {
      labelCol: { style: { width: "150px" } },
      wrapperCol: { span: 14 },
      formState,
      onSubmit,
      rules,
      goback,
    };
  },
});
</script>

<style  scoped>
</style>